<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    
    <h:head>
        <title>Agriculture For Sale</title>
        <link rel="stylesheet" type="text/css" href="#{resource['css:styles.css']}" />    
        <script type="text/javascript">
            function init(data)
            {
                if (data > 0)
                {
                    document.getElementById("checkout").style.display = "inline";
                    document.getElementById("empty").style.display = "none";
                }
            }
        </script>
    </h:head>

    <ui:composition template="templates/content.xhtml">
        <ui:define name="content">
    
            <h:body onload="init(#{farmUserController.cartCount});">

                <h:form id="theCart">
                    <div>
                        <h:panelGroup id="cartList">
                            <ui:repeat value="#{farmUserController.cart.properties}" var="property">
                            <div  style="border:1px solid black; padding: 10px">
                                <h2><h:outputText value="#{property.getAddress()}" /></h2>
                                    Price: $<h:outputText value="#{property.getPrice()}" /><br/>
                                    Acres: <h:outputText value="#{property.getAcre()}" /><br/>
                                    State: <h:outputText value="#{property.getState()}" /><br/>
                                    Zip: <h:outputText value="#{property.getZip()}" /><br/>
                                    Status: <h:outputText value="#{property.getStatus()}" />
                                    <br/>
                                    <br/>
                                    <h:commandButton value="Remove from Cart" action="#{farmUserController.cart.removeProperty(property)}" />
                                    <h:graphicImage library="images" name="#{property.getImage()}" />
                            </div>
                        </ui:repeat>
                        </h:panelGroup>
                    </div>
                </h:form>

                
                <h:form>
                    <span id="checkout" style="display: none;">
                        <h:commandButton id="coButton" value="Checkout Cart" action="#{farmUserController.buyTheFarm()}" styleClass="checkoutButton"></h:commandButton>
                    </span>
                </h:form>
                
                <span id="empty">
                    User's Cart is empty!
                </span>

            </h:body>

        </ui:define>
    </ui:composition>
    
</html>